import React, { useEffect, useRef, useState } from "react";
import Footer from "../components/Footer";
import Header from "../components/Header";
import service from "../service";

export default function Register() {
  // 用户名:邮箱或者电话状态变量
  let [uname, setUname] = useState("");
  let unameRef = useRef();
  // 密码状态变量
  let [upwd, setUpwd] = useState("");
  let upwdRef = useRef();
  // 手机号状态变量
  let [phone, setPhone] = useState("");
  let phoneRef = useRef();
  // 验证码
  let [yzm, setYzm] = useState("w3e5");
  let yzmRef = useRef();
  function doRegister() {
    let m = unameRef.current.value;
    let p = upwdRef.current.value;
    let n = phoneRef.current.value;
    service
      .userRegister(m, p, n)
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  }
  return (
    <>
      {/* header */}
      <div className="header_box">
        <Header></Header>
      </div>
      {/* main */}
      <div className="register">
        <h2>新用户注册</h2>
        <ul>
          <li>
            <span>邮箱：</span>
            <input
              ref={unameRef}
              defaultValue={uname}
              type="text"
              id="uname"
              placeholder="请输入邮箱名"
            />
            <em></em>
            <i></i>
          </li>
          <li>
            <span>密码：</span>
            <input
              ref={upwdRef}
              defaultValue={upwd}
              type="password"
              id="upwd"
              placeholder="请输入密码"
            />
            <em></em>
            <i></i>
          </li>
          <li>
            <span>重复密码：</span>
            <input type="password" id="upwd2" placeholder="请重复输入密码" />
            <em></em>
            <i></i>
          </li>
          <li>
            <span>手机号：</span>
            <input
              ref={phoneRef}
              defaultValue={phone}
              type="text"
              id="phone"
              placeholder="请输入手机号"
            />
            <em></em>
            <i></i>
          </li>
          <li>
            <span>验证码：</span>
            <input
              ref={yzmRef}
              defaultValue={yzm}
              type="text"
              className="inp_yzm"
              placeholder="请输入验证码"
            />
            <img src="images/yzm.png" alt="" />
            <strong className="icon_refresh"></strong>
          </li>
          <li className="li_checkbox">
            <label>
              <input type="checkbox" defaultChecked />
              <span>我已阅读并同意用户注册协议</span>
            </label>
          </li>
          <li className="li_btn">
            <button onClick={doRegister} type="button">
              提交注册
            </button>
          </li>
        </ul>
      </div>
      <footer className="footer">
        <Footer></Footer>
      </footer>
    </>
  );
}
